<template>
  <div>
    <h1 id="h1">{{msg}}</h1>
    <button @click="msg='吃饭饭'">点我</button>
  </div>
</template>

<script>
export default {

  data() {
    return {
      msg:'我是你的爸爸'
    };
  },
  created(){
    console.log('created',this.msg);
  },
  mounted(){
    const h1=document.querySelector('#h1')
    console.log('mounted',h1);
  },
  updated(){
    const h1=document.querySelector('#h1')
    console.log('updated',h1.innerHTML);
  },
  destroyed(){
    console.log('destroyed');
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>